<template>
	<div class="mainContent offerinfo-container">
		<!-- 成本参数 -->
		<div class="bread-nav">
			<span class="bread-item">供应商管理</span>
			<span class="bread-icon">&gt;</span>
			<span class="bread-item">供应商基本信息</span>
			<span class="bread-icon">&gt;</span>
			<span class="bread-item">成本参数</span>
		</div>
		<!--  -->
		<div class="offerinfo-contant">
			<!-- search form -->
			<div class="search-cont">
				<!--  -->
				<advancedSearch :option="filterOption" @getChild="showChild" @onSearch="toSearch" @onClear="toClear" @onExport="toExport"></advancedSearch>
			</div>
			<!-- search form end-->
			<!-- table -->
			<div class="table">
				<!--  -->
				<el-row>
					<div class="common-table-title">
						<div class="common-table-icon"></div>
						<div class="common-table-fl">供应商成本参数</div>
						<div class="common-btn-group">
							<div class="common-table-btn-item">导出</div>
						</div>
					</div>
				</el-row>
				<!--  -->
				<el-row class="common-table-con">
					<el-table :data="tableData" :row-style="selectedHighlight" max-height="550" @selection-change="handleSelectionChange">
						<el-table-column type="selection" width="55" fixed>
						</el-table-column>
						<el-table-column prop="style" label="款式" width="100">
						</el-table-column>
						<el-table-column prop="material" label="材质" width="100">
						</el-table-column>
						<el-table-column prop="goldLoss" label="损耗" width="100">
						</el-table-column>
						<el-table-column prop="city" label="副石1材质" width="100">
						</el-table-column>
						<el-table-column prop="city" label="副石1单价" width="100">
						</el-table-column>
						<el-table-column prop="city" label="副石2材质" width="100">
						</el-table-column>
						<el-table-column prop="zip" label="副石2单价" width="100">
						</el-table-column>
						<el-table-column prop="laborFee" label="打包工费">
						</el-table-column>
						<el-table-column prop="address" label="风险费">
						</el-table-column>
						<el-table-column prop="address" label="吹蜡费">
						</el-table-column>
						<el-table-column prop="address" label="生效时间">
						</el-table-column>
						<el-table-column prop="address" label="失效时间">
						</el-table-column>
					</el-table>

					<!-- 分页 -->
					<el-row class="pagination-cont">
						<el-pagination @size-change="handleSizeChange" background @current-change="handleCurrentChange" :current-page="pager.params.pageIndex"
						 :page-sizes="pager.pageSizeArr" :pager-count="5" :page-size="pager.params.pageSize" layout="total, sizes, prev, pager, next, jumper"
						 :total="pager.pageTotal">
						</el-pagination>
					</el-row>
				</el-row>
			</div>
			<!--  -->
			<!-- 操作提示 -->
			<el-dialog :visible.sync="dialogAlert" top="100px" class="operate-tips-dialog">
				<!--  -->
				<div class="common-table-title">
					<div class="common-table-icon"></div>
					<div class="common-table-fl">提示</div>
				</div>
				<p class="confirm-msg">是否确定审核？</p>
				<div class="operate-tips-btn-group">
					<div class="operate-tips-btn-item" @click="handleClickOperate(scope.row)">确定</div>
					<div class="operate-tips-btn-item">驳回</div>
				</div>
			</el-dialog>
			<!--  -->
		</div>
	</div>
</template>

<script>
	import advancedSearch from "@/components/common/filter/advancedSearch";
	import datas from "./datas.js"
	import {
		getDateString
	} from "@/assets/js/common.js"
	export default {
		name: "offerinfo",
		components: {
			advancedSearch
			
		},
		props: [""],
		data() {
			return {
				dialogAlert: false,
				cardSelected: "",
				selectRow: [],
				TableSelectData: [],
				pager: datas.pager,
				tableData: [],
				searchFormPick: {},
				filterOption: datas.filterOption,
				searchFromData: datas.searchFromData
			}
		},
		computed: {
			lang() {
				return this.$t("lang");
			}
		},
		mounted() {
			this.getSapStyleFeeList();
		},
		methods: {
			getSearchInfoParam() {
				let data = _.cloneDeep(this.searchFromData);
				if (data.deliveryTime) {
					data.deliveryStartTime = getDateString(data.deliveryTime[0]);
					data.deliveryEndTime = getDateString(data.deliveryTime[1]);
					data.deliveryTime = undefined;
				}
				return data;
			},
			getSapStyleFeeList() {
				var apiTest = this.apiTest;
				const params = {
					condition: {
						...this.getSearchInfoParam(),
					},
					...this.pager.params
				};
				this.$ajax
					.post(apiTest + "/supplier/supplierCostParameter/list", params)
					.then(result => {
						const data = result.data;
						if (data.status === 200) {
							this.tableData = data.result.result;
							this.pager.pageTotal = data.pageTotal;
						} else {
							console.log(result);

						}
					})
					.catch(err => {
						console.log(err);
					});
			},
			cardClick(color) {
				this.cardSelected = color;
			},
			handleSizeChange(val) {
				this.getSapStyleFeeList();
			},
			handleCurrentChange(val) {
				this.getSapStyleFeeList();
			},
			handleClick() {},
			handleSelectionChange(selection) {
				// 选中的数组
				this.TableSelectData = selection;
			},
			handleClickOperate(data) {
				this.dialogAlert = true;
				console.log(data);
			},
			selectedHighlight(data) {
				// 如果选中则添加高亮样式
				if (this.TableSelectData.indexOf(data.row) > -1) {
					return {
						"background-color": "#FEF6EE"
					};
					return {};
				}
			},
			showChild(val) {
				this.searchFromData = val;
			},
			toSearch(val) {
				this.getSapStyleFeeList();
			},
			toClear(val) {
				this.searchFromData = datas.searchFromData;
			},
			toExport(val) {
				console.log(val);
			}
		}
	};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
	.table {
		padding: 24px 0;
		max-width: 100%;
	}

	.bread-nav {
		width: 100%;
		height: 48px;
		background-color: #fff;
		display: flex;
		align-items: center;
		padding-left: 25px;
		box-sizing: border-box;
		font-family: "Microsoft YaHei","微软雅黑","Microsoft JhengHei","华文细黑",STHeiti,MingLiu,'Avenir', Helvetica, Arial, sans-serif;
		font-size: 16px;
		color: #888888;
	}

	.bread-icon {
		padding: 5px;
	}

	.pagination-cont {
		height: 88px;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #fff;
	}

	@media screen and (min-width: 768px) and (max-width: 991px) {
		.offerinfo-container {
			width: 100%;
			height: 830px;
			overflow-y: auto;
		}
	}

	@media screen and (min-width: 992px) and (max-width: 1200px) {
		.offerinfo-container {
			width: 100%;
			height: 620px;
			overflow-y: auto;
		}
	}

	@media screen and (min-width: 1200px) {
		.bread-nav {
			width: 100%;
			height: 48px;
			background-color: #fff;
			display: flex;
			align-items: center;
			padding-left: 25px;
			box-sizing: border-box;
			font-family: "Microsoft YaHei","微软雅黑","Microsoft JhengHei","华文细黑",STHeiti,MingLiu,'Avenir', Helvetica, Arial, sans-serif;
			font-size: 16px;
			color: #888888;
		}

		.bread-icon {
			padding: 5px;
		}

		.offerinfo-container {
			width: 100%;
			height: 800px;
			overflow-y: auto;
		}

		.offerinfo-contant {
			width: 100%;
			background-color: #f3f3f3;
			padding: 14px 24px;
			box-sizing: border-box;
		}

		.search-cont-form {
			display: flex;
		}

		.search-cont {
			background-color: #fff;
			margin-top: 24px;
			border-radius: 8px;
		}

		.data-picker-label {
			display: inline-block;
			vertical-align: top;
			line-height: 32px;
			height: 32px;
			margin-top: 16px;
			font-family: "Microsoft YaHei","微软雅黑","Microsoft JhengHei","华文细黑",STHeiti,MingLiu,'Avenir', Helvetica, Arial, sans-serif;
			color: #222222;
			font-size: 14px;
			margin-left: 24px;
		}

		.search-left {
			flex: 1;
			min-height: 64px;
			max-width: 1350px;
		}

		.card_nav .xm-card-item {
			width: 256px;
		}
	}
</style>
